<template>
<div class="order">
  <div class="home_box4">
    <div class="box_4">
      <div class="searchCom_left">
        <img src="../../assets/image/home/home (7).png" class="searchCom_img" />
      </div>
      <div class="searchCom_right">
        <div class="searchCom_right1">
          <div class="search_rightTop" @click="search">
            <input type="text" /><img src="../../assets/image/home/home (15).png" class="searchCom_img" /><span>还是钟南山</span>
            <div class="sou">搜索</div>
          </div>
        </div>
      </div>
    </div>
    <div class="order_1">
      <div class="bookList_top">
        <div class="item">
          <span>书号：</span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>书号：</span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>版次: </span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>版本: </span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>学科: </span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>专业: </span>
          <input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>是否出版: </span><input v-model="input" placeholder="请输入书号" />
        </div>
        <div class="item">
          <span>适用对象: </span><input v-model="input" placeholder="请输入书号" />
        </div>
      </div>
    </div>
    <div class="order_2">
      <div class="item">
        <span>出版时间:</span>
        <div class="block">
          <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </div>
      <div class="order_top1">
        <div class="search">搜索</div>
        <div class="cz">重置</div>
      </div>
    </div>
    <div class="booklist_box4">
      <div class="boxs_4">
        <div class="new_top">
          <el-table :data="tableData" height="804px" width="1310px" class="tableBox" :header-cell-style="{

height: '37px',

background: '#F3E3E4',

color: '#000000',

padding: '0 20px'

}" :row-style="{

height: '153px',

background: '#F2F2F2',

color: '#000000'

}">
            <el-table-column prop="image" label="图片">
                   <template slot-scope="scope">
                　　　　<img :src="scope.row.img" width="86" height="108" />
                　　</template>
            </el-table-column>
            <el-table-column prop="number" label="书号">
            </el-table-column>
            <el-table-column prop="book" label="书名">
            </el-table-column>
            <el-table-column prop="author" label="作者">
            </el-table-column>
            <el-table-column prop="subkect" label="学科">
            </el-table-column>
            <el-table-column prop="sub" label="专业">
            </el-table-column>
            <el-table-column prop="pub" label="出版社">
            </el-table-column>
            <el-table-column prop="price" label="定价">
            </el-table-column>
            <el-table-column prop="pubtime" label="出版时间">
            </el-table-column>
            <el-table-column prop="obj" label="试用对象">
            </el-table-column>
            <el-table-column prop="obj" label="">
              <template>
                <i class="el-icon-shopping-cart-2"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="booklist_boo5">
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="1000" :page-sizes="[10, 20, 30, 40]" :page-size="100" style="margin-left: 416px">>
      </el-pagination>
    </div>
    <div>
      <img src="@/assets/image/book/10.png" alt="" class="dinwgei_img_5" />
    </div>
  </div>
  <Bottom/>
</div>
</template>

<script>
import Bottom from '../../components/Bottom'
export default {
  components:{
    Bottom
  },
  methods: {
    search() {}
  },
  data() {
    return {
      input: '',
      tableData: [{
          img: require('@/assets/image/book/1.png'),
          number: '王小虎',
          book: '1518',
          author: '阿三',
          subkect: '111',
          sub: '历史',
          pub: '商务',
          price: '999',
          pubtime: '2019',
          obj: '学生',
          dd: 'el - icon - shopping - cart - 2'
        },

        {
          img: require('@/assets/image/book/2.png'),
          number: '王小虎',
          book: '1518',
          author: '阿三',
          subkect: '111',
          sub: '历史',
          pub: '商务',
          price: '999',
          pubtime: '2019',
          obj: '学生'
        },
        {
          img: require('@/assets/image/book/3.png'),
          number: '王小虎',
          book: '1518',
          author: '阿三',
          subkect: '111',
          sub: '历史',
          pub: '商务',
          price: '999',
          pubtime: '2019',
          obj: '学生'
        },
        {
          img: require('@/assets/image/book/3.png'),
          number: '王小虎',
          book: '1518',
          author: '阿三',
          subkect: '111',
          sub: '历史',
          pub: '商务',
          price: '999',
          pubtime: '2019',
          obj: '学生'
        },
        {
          img: require('@/assets/image/book/3.png'),
          number: '王小虎',
          book: '1518',
          author: '阿三',
          subkect: '111',
          sub: '历史',
          pub: '商务',
          price: '999',
          pubtime: '2019',
          obj: '学生'
        }
      ],
      pickerOptions: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 7
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 30
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 90
              )
              picker.$emit('pick', [strt, end])
            }
          }
        ]
      },
      value1: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      value2: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dinwgei_img_5 {
  width: 41px;
  height: 40px;
  // position: fixed;
  // right: 380px;
  // top: 410px;
  margin-top: -880px;
  margin-left: 1310px;
  position: absolute;
}

.order {
  width: 100%;
  height: 100%;

  .home_box4 {
    width: 1310px;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }

  .box_4 {
    height: 94px;
    display: flex;
    padding-top: 23px;
    justify-content: space-between;

    .searchCom_left {
      img {
        width: 411px;
        height: 74px;
        margin: 0 32px 0 14px;
      }
    }

    .searchCom_right1 {
      width: 666px;
      height: 94px;

      .search_rightTop {
        width: 666px;
        height: 64px;
        border: 4px solid #b61c38;
        border-radius: 6px 0px 0px 6px;
        position: relative;

        input {
          width: 566px;
          height: 100%;
          border: none;
          position: absolute;
          left: 0;
          top: 0;
        }

        .searchCom_img {
          width: 32px;
          height: 33px;
          position: absolute;
          top: 12px;
          left: 23px;
        }

        span {
          width: 80px;
          height: 16px;
          font-size: 15px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #848484;
          line-height: 16px;
          position: absolute;
          top: 21px;
          left: 70px;
        }

        .sou {
          width: 100px;
          height: 100%;
          position: absolute;
          right: 0;
          line-height: 60px;
          text-align: center;
          background: #b61c38;
          font-size: 25px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .order_1 {
    .bookList_top {
      height: 120px;
      width: 800px;
      display: flex;
      flex-wrap: wrap;
      line-height: 30px;
      font-size: 14px;
      margin: 20px auto;
      color: #848484;

      .item {
        width: 25%;
        display: flex;
        justify-content: space-around;

        input {
          width: 126px;
          height: 36px;
        }
      }
    }
  }

  .order_2 {
    width: 500px;
    margin: 0 auto;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
    }

    .order_top1 {
      width: 250px;
      display: flex;
      align-items: center;
      margin: 20px auto;

      .search {
        width: 90px;
        height: 30px;
        background: #f3e3e4;
        border: 1px solid #8a8a8a;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        margin: 0 5px;
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #960006;
      }

      .cz {
        width: 90px;
        height: 30px;
        background: #ffff;
        border: 1px solid #8a8a8a;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #960006;
      }
    }
  }

  .booklist_box4 {
    width: 100%;
    height: 804px;

    .boxs_4 {
      width: 1310px;
      height: 804px;
      margin: 0 auto;
      background: #f2f2f2;
    }

    .new_top {
      background: #f2f2f2;
    }
  }

  .booklist_boo5 {
    width: 1310px;
    height: 82px;
    background: #f2f2f2ff;
    margin: 0 auto;
  }
}
</style>
